import React, { useEffect } from "react";
import {
  Button,
  Col,
  Drawer,
  Select,
  Form,
  Input,
  Space,
  Row,
  Cascader,
  Upload,
  Alert,
} from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { isEmpty } from "lodash";
import * as publicData from "../../utils/staticData";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
export default function AddInformationBeneficiaries(props) {
  const { t, i18n } = useTranslation(); // 结构拿出方法
  // echoData 数据回显从表格传递的数据流
  const { onClose, open, echoData, addflag } = props;

  // console.log("addflag", addflag);

  const [form] = Form.useForm();

  const { Option } = Select;
  const { SHOW_CHILD } = Cascader;

  // 远程搜索地区银行识别码
  const options = [
    {
      value: "0011",
      label: "国库",
    },
    {
      value: "003",
      label: "渣打银行（香港）有限公司",
    },
    {
      value: "004",
      label: "香港上海汇丰银行有限公司",
    },
    {
      value: "005",
      label: "东方汇理银行",
    },
    {
      value: "006",
      label: "东方汇理银行",
    },
    {
      value: "007",
      label: "东方汇理银行",
    },
    {
      value: "008",
      label: "东方汇理银行",
    },
  ];

  const uploadButton = (
    <>
      <Button icon={<UploadOutlined />}>{t("form.upload")}</Button>
    </>
  );

  // 远程搜索关键字查询
  const filter = (inputValue, path) =>
    path.some(
      (option) =>
        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
    );

  // 提交表单
  const handleSubmit = () => {
    const formSubmitData = form.getFieldsValue();
  };

  const titleDom = () => {
    if (addflag == 1) {
      return <span>{t("form.Informationbeneficiaries")}</span>;
    } else {
      return <span>{t("form.Modifybeneficiaryinformation")}</span>;
    }
  };

  // 回显开关
  let flag = _.isEmpty(echoData);

  // 数据回显;
  //   useEffect(() => {
  //     if (!flag) {
  //       form.setFieldsValue({
  //         ...echoData,
  //       });
  //     }
  //   }, [flag, echoData]);

  return (
    <Drawer
      // title={addflag == 1 ? "新增受益人信息" : "修改受益人信息"}
      title={titleDom()}
      width={920}
      onClose={() => {
        onClose(false);
        form.resetFields();
      }}
      open={open}
      bodyStyle={{
        paddingBottom: 80,
      }}
      footer={
        <Space>
          <Button
            onClick={() => {
              form.resetFields();
            }}
          >
            {/* 重置 */}
            {t("buttons.Reset")}
          </Button>
          <Button
            onClick={() => {
              onClose(false);
              handleSubmit();
              form.resetFields();
            }}
            type="primary"
          >
            {/* 提交 */}
            {t("buttons.confirm")}
          </Button>
        </Space>
      }
    >
      <Alert
        message={t("message.beneficiaryInformation")}
        // message="账户名称+开户行地址不可超过114个字符（只允许英文字母数字空格.,/-()'），否则可能导致境外银行付款失败"
        type="warning"
        showIcon
        style={{ marginBottom: "10px" }}
      />
      <Form form={form}>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="Identification"
              label={t("form.BankCountry")}
              // label="银行所在国家"
              tooltip={t("form.BankCountryMessage")}
              // tooltip="系统会根据所选国家判断境内/境外账户"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Cascader
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
                showSearch={{
                  filter,
                }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="url"
              // label="客户类型"
              label={t("form.Customertype")}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select allowClear>
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="Identification"
              label={t("form.CustomerCountry")}
              // label="客户所在国家"
              rules={[
                {
                  required: true,
                  // message: "客户所在国家",
                },
              ]}
            >
              <Cascader
                options={options}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
                showSearch={{
                  filter,
                }}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="type"
              // label="币种"
              label={t("form.currency")}
              rules={[
                {
                  required: true,
                  // message: "请选择币种",
                },
              ]}
            >
              <Select allowClear>
                <Option value="private">对私</Option>
                <Option value="public">对公</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="name"
              // label="账户名称"
              label={t("form.accountTitle")}
              validateStatus="error"
              // help="非国内账户只允许英文字母数字空格"
              help={t("message.accountTitleHelp")}
              rules={[
                {
                  required: true,
                  // message: "请输入账户名称",
                },
              ]}
            >
              <Input allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="currency"
              label={t("form.AccountNoAdd")}
              // label="账户账号（欧美地区IBAN）"
              rules={[
                {
                  required: true,
                  // message: "请输入账户账号",
                },
              ]}
            >
              <Input allowClear />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="city"
              label={t("form.AccountType")}
              // label="账户类型"
              rules={[
                {
                  required: true,
                  // message: "请输入账户类型",
                },
              ]}
            >
              <Cascader
                options={publicData.cityData}
                changeOnSelect
                showCheckedStrategy={SHOW_CHILD}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="CardType"
              // label="合作有效期"
              label={t("form.Validitycooperation")}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select allowClear>
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="largeAmount"
              label={t("form.IdentificationNumber")}
              //  label="证件号码"
            >
              <Input
                style={{
                  width: "100%",
                }}
                allowClear
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="swiftcode"
              // label="银行名称"
              label={t("form.Bankname")}
              rules={[
                {
                  required: true,
                  // message: "请输入银行名称",
                },
              ]}
            >
              <Input
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入银行名称"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="transferAmount"
              //  label="支付行号"
              label={t("form.PaymentbankNo")}
            >
              <Select allowClear>
                {publicData.CardType.map((district) => (
                  <Option key={district.value}>{district.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="detailAddress"
              label="SWIFTCODE"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input
                style={{
                  width: "100%",
                }}
                allowClear
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="transferAmount"
              label={t("form.changetrainsShops")}
              // label="中转行支付行号"
            >
              <Input
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入中转行支付行号"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="detailAddress"
              // label="开户银行地址"
              label={t("form.Addressdepositbank")}
              rules={[
                {
                  //   required: true,
                  // message: "请输入详细地址",
                },
              ]}
            >
              <Input
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入开户银行地址"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="transferAmount"
              label={t("form.Customeraddress")}
              // label="客户地址"
            >
              <Input
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入客户地址"
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="detailA2ddress"
              label={t("form.PhoneinJapan")}
              // label="联系电话(日本必填)"
              rules={[
                {
                  required: true,
                  // message: "请输入联系电话",
                },
              ]}
            >
              <Input
                style={{
                  width: "100%",
                }}
                allowClear
                // placeholder="请输入联系电话"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="accountCountry"
              validateStatus="error"
              help={t("form.uploadhelp")}
              // help="上传材料不得超过8M"
              rules={[
                {
                  required: true,
                },
              ]}
              label={t("form.upload")}
              // label="上传材料"
            >
              <Upload
                name="avatar"
                //   listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                //   beforeUpload={beforeUpload}
                //   onChange={handleChange}
              >
                {uploadButton}
              </Upload>
            </Form.Item>
          </Col>
          <Col span={12}></Col>
        </Row>
      </Form>
    </Drawer>
  );
}
